<!DOCTYPE html>
<html lang="en">
    <head>
    	<title>登录页面</title>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../static/layui/css/layui.css"/>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
      		.container{
      			width: 420px;
      			height: 250px;
		 		 position: absolute;   
		 		 top: 0;  
		 		 left: 0;  
		 		 bottom: 0;  
		 		 right: 0;  
		 		 margin: auto;  
		 		 padding: 20px;  
		 		 border-radius: 12px;  
		 		 background-color: #fff;  
		 		 box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
		 		 font-size: 16px;
      		}
 
        	.layui-input{
        		border-radius: 5px;
        		width: 300px;
        		height: 40px;
        		font-size: 15px;
        	}
        	.layui-form-item{
        		margin-left: -20px;
        	}
			#logoid{ 
				margin-top: -16px;
		 		 padding-left:150px; 
		 		 padding-bottom: 15px;
			}
			.layui-btn{
				margin-left: -50px;
				border-radius: 5px;
        		width: 350px;
        		height: 40px;
        		font-size: 15px;
			}
			a:hover{
			 text-decoration: underline; 
			}
 
        </style>
    </head>
    <body>
    	<form class="layui-form" id="form" action="">
    		<div class="container">
    			<div class="layui-form-mid layui-word-aux" style="left:42%">
    				<i class="layui-icon layui-icon-username" style="font-size:70px;" ></i>
    				<p style="font-size:14px">&nbsp;&nbsp;系统登录</p>
    			</div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">账 &nbsp;&nbsp;号</label>
			    <div class="layui-input-block">
			      <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
			    <div class="layui-input-block">
			      <input type="password" name="password"  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">登录</button>  
			    </div>
			  </div>
			</div>
		</form>
		<script src="../static/layui/layui.js"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate'], function(){
			  var form = layui.form
			  ,layer = layui.layer
			  ,layedit = layui.layedit
			  ,laydate = layui.laydate;



			  //监听提交
			  form.on('submit(formDemo)', function(data){
				  $.ajax({   
			           url:'http://localhost:8080/user/login',
			           type:"GET",
			           data:data.field,        
			           dataType:'text',  
			           success:function(res){
			        	   //String转换json
			        	   var jsonObj = JSON.parse(res);
			        	   console.info(jsonObj);
			        	   //console.info(jsonObj[0].status)
			                if(jsonObj.status==0){
			     				console.log(res);	
			               	 	layer.msg("登录成功");
			               	 	console.info("成功");
			               	 	parent.location.reload();
				                location.href='http://localhost:8080';
			                }else if(jsonObj.status==2){
			                	layer.msg("缺少必要数据");
			                	console.info("失败");
			                }else{
								layer.msg("账户或密码不正确");
								console.info("失败");
							}
			                $("form")[0].reset();
			                form.render();
			           },
			           error:function (data) {
			        	   		console.info(data);
				               	layer.msg("网络错误");
				               	$("form")[0].reset();
				                form.render();
				      	} 
			          }) ;
			  });

			});
			</script>
    </body>
</html>